<template>
  <div class="container">
    <div class="titleTopBox">
      <el-row class="topContent">
        <el-col :span="8">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          <span class="titleTop">对接项目及接口详情</span>
        </el-col>
        <el-col :span="16" class="alignRight">
          <div>
            <el-button
              v-if="typePage == 'jszs'"
              type="danger"
              @click="handleDelete()"
              class="createSalaryBut"
            >
              删除appid
            </el-button>
            <el-button
              v-if="typePage == 'jszs'"
              type="primary"
              @click="toSalaryAccount"
              class="salaryAccountBut"
            >
              查看脚本
            </el-button>
            <el-button
              v-if="typePage == 'jszs'"
              type="primary"
              @click="modifyAppid"
              class="salaryAccountBut"
            >
              修改
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="mainCon">
      <el-row>
        <el-col :span="24">
          <div class="blockquote">基本信息</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="detailInfoItem">
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">单位名称：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ projectInfo.name }}</div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">单位类型：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ projectInfo.inputTypeName }}</div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">AppID：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">
                  {{ projectInfo.appId }}
                </div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">appSecret：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">{{ projectInfo.appSecret }}</div>
              </el-col>
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">有效期：</div>
              </el-col>
              <el-col :span="4" class="information">
                <div class="grid-content">
                  <template>
                    <p
                      v-if="
                        projectInfo.effectiveEndDate == '4712-12-31' ||
                        projectInfo.effectiveEndDate == '4712-12-31 00:00:00'
                      "
                    >
                      长期有效
                    </p>
                    <p
                      v-else-if="currentTime > projectInfo.effectiveEndDate"
                      style="color: #ff4242"
                    >
                      {{ projectInfo.effectiveEndDate }} (已过期)
                    </p>
                    <p v-else>{{ projectInfo.effectiveEndDate }}</p>
                  </template>
                </div>
              </el-col>
            </el-row>
            <el-row class="detailInfoItem">
              <el-col :span="3" class="labelWidth">
                <div class="grid-content">测试服登录地址：</div>
              </el-col>
              <el-col :span="5" class="information">
                <div class="grid-content">
                  {{ projectInfo.testAddress }}
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="blockquote">接口配置</div>
        </el-col>
      </el-row>
      <el-row class="detailInfo">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-row class="searchBox searchInputWidth">
              <el-form :inline="true" :model="filterField" ref="accountForm">
                <el-col :lg="8" :xl="6">
                  <el-form-item label="接口名称" class="row-padding-bottom">
                    <el-input
                      placeholder="请输入"
                      clearable
                      v-model="filterField.cnName"
                      @blur="filterField.cnName = changeValue($event)"
                    />
                  </el-form-item>
                </el-col>
                <el-col :lg="8" :xl="6">
                  <el-form-item label="状态" class="row-padding-bottom">
                    <el-select
                      placeholder="请选择"
                      v-model="filterField.enabled"
                      clearable
                    >
                      <el-option label="启用" value="ENABLED" />
                      <el-option label="停用" value="DISABLE" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="icon iconfont iconchazhao1"
                    @click="searchTable"
                    class="searchBtn"
                  >
                    <span>搜索</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </el-row>
            <div class="spacing"></div>
            <!-- 表格 -->
            <div
              ref="tableBox"
              :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
            >
              <el-table
                ref="tableBox1"
                :max-height="tableHeight"
                :data="tableData"
                :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                highlight-current-row
                stripe
                v-loading="loading"
                style="border: 1px solid #dfe6ec"
              >
                <el-table-column label="接口名称" width="230">
                  <template slot-scope="scope">
                    <copyText
                      :tableIndex="scope.$index"
                      :copyTextName="scope.row.cnName"
                      :columnName="'cnName'"
                    ></copyText>
                  </template>
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="qps"
                  label="QPS"
                  :formatter="formatTd"
                ></el-table-column>
                <!-- <el-table-column
                align="center"
                prop="enabledName"
                label="状态"
                :formatter="formatTd"
              ></el-table-column> -->
                <el-table-column
                  align="center"
                  prop="enabledName"
                  label="状态"
                  filter-placement="bottom-end"
                >
                  <template slot-scope="scope">
                    <!-- 1.当由于技术后台禁用该appId时，气泡窗展示“该appId已被管理员设为禁用，如有问题请与管理员联系”
                        2.当appId过期时，气泡窗展示“该appId已过有效期，如有问题请与管理员联系” -->
                    <el-button
                      v-if="scope.row.enabled === 'ENABLED'"
                      size="mini"
                      type="success"
                      disable-transitions
                      >{{ scope.row.enabledName }}</el-button
                    >
                    <el-tooltip
                      v-else
                      class="item"
                      effect="dark"
                      :content="
                        scope.row.enabled === 'DISABLE' &&
                        currentTime > scope.row.effectiveEndDate
                          ? '该appId已过有效期，如有问题请与管理员联系'
                          : '该appId已被管理员设为禁用，如有问题请与管理员联系'
                      "
                      placement="top"
                    >
                      <el-button
                        size="mini"
                        type="danger"
                        disable-transitions
                        >{{ scope.row.enabledName }}</el-button
                      >
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  align="left"
                  label="操作"
                  width="250px"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <div>
                      <el-link type="primary" @click="dockingLog(scope.row)"
                        >查看日志</el-link
                      >
                    </div>
                  </template>
                </el-table-column>
                <div slot="empty" v-show="isShow">
                  <emptyTable emptyText="暂无相关信息"></emptyTable>
                </div>
              </el-table>
              <Pagination
                ref="pagination"
                @getList="getTableList"
                :requestUrl="requestUrl"
                :filterField="filterField"
                :pageSize="pageSize"
                :pageSizes="pageSizes"
              ></Pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--查看脚本-->
    <el-dialog
      title="查看脚本"
      :visible.sync="formVisible"
      :close-on-click-modal="false"
      @close="handleCloseForm"
      custom-class="dialog-minwidth"
      width="700px"
      :modal-append-to-body="false"
    >
      <div>
        <p v-html="datas"></p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click.native="copyScript" class="save"
          >复制</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import common from '../../kits/common'
export default {
  name: 'equipmentAppidDetailJs',
  data() {
    return {
      hiddleToolBar: false,
      tableHeight: null,
      projectInfo: {
        appId: '',
        appSecret: '',
        effectiveEndDate: '',
        inputTypeName: '',
        inputTypeName: '',
        name: '',
        testAddress: '',
      },
      id: '',
      appidPage: '',
      requestUrl: 'api-m/inputUserAuthDetail/base/v1/page', //表格请求路径
      filterField: {
        authId: '',
        enabled: '',
        cnName: '',
      },
      currentTime: '', //当前时间
      tableData: [],
      datas:
        "console.log('started Wanikani Procrastination Annihilation BETA');",
      loading: false,
      isShow: false,
      formVisible: false,
      typePage: '',
      appidPage: '',
    }
  },
  created() {
    //获取当前时间
    this.getCurrentTime()
    this.id = this.$route.query.id
    this.appidPage = this.$route.query.appId
    this.typePage = this.$route.query.typePage
    this.filterField.authId = this.$route.query.id
    this.$nextTick(function () {
      this.getDetail()
      // this.getApiSet();
      this.$refs.pagination.getTableListData()
    })
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 290
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 328 + 'px')
      }
      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 300
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
  methods: {
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 242

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    /**
     * @description: 查看脚本
     */
    toSalaryAccount() {
      this.formVisible = true
    },
    /**
     * @description: 复制脚本
     */
    copyScript() {
      let url = this.datas
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象;
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success',
      })
      oInput.remove()
    },
    getCurrentTime() {
      var now = new Date()
      var year = now.getFullYear()
      var month = now.getMonth() + 1
      var day = now.getDate()
      var time = year + '-' + common.pad(month) + '-' + common.pad(day)
      this.currentTime = time
    },
    /**
     * @description: 修改appID
     * @param {*} data
     */
    modifyAppid() {
      this.$router.push({
        path: '/home/interfacePlatform/addAppid',
        name: 'addAppid',
        query: {
          id: this.id,
          appId: this.appidPage,
          typePage: 'jszs',
          type: 'modify',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/interfacePlatform/equipmentAppidJs',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 获取接口基本信息
     */
    getDetail() {
      const vm = this
      this.axios({
        method: 'post',
        data: { id: vm.id },
        url: 'api-m/inputUserAuth/base/v1/detail',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.projectInfo.appId = response.data.result.appId
              vm.projectInfo.appSecret = response.data.result.appSecret
              vm.projectInfo.testAddress = response.data.result.testAddress
              vm.projectInfo.effectiveEndDate =
                response.data.result.effectiveEndDate
              vm.getprojectName(response.data.result.userId)
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取接口配置
     */
    getApiSet() {
      const vm = this
      this.axios({
        method: 'post',
        data: { authId: vm.id },
        url: 'api-m/inputUserAuthDetail/base/v1/page',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.tableData = response.data.result.results
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 获取接口基本信息
     */
    getprojectName(userId) {
      const vm = this
      this.axios({
        method: 'post',
        data: { id: userId },
        url: 'api-m/inputUser/base/v1/detail',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.projectInfo.name = response.data.result.name
              vm.projectInfo.inputTypeName = response.data.result.inputTypeName
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    /**
     * @description: 删除appid
     */
    handleDelete(index, row) {
      this.$confirm(
        '删除后,用户将无法使用该appld继续上传数据,是否确认删除?',
        '提示',
        {
          cancelButtonClass: 'btn-custom-cancel',
          type: 'warning',
        }
      )
        .then(() => {
          this.deleteAppId()
        })
        .catch(() => {})
    },
    /**
     * @description: 获删除appid
     */
    deleteAppId() {
      const vm = this
      this.axios({
        method: 'post',
        data: { id: vm.id },
        url: 'api-m/inputUserAuth/base/v1/delete',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              vm.goBack()
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //对接日志
    dockingLog(row) {
      this.$router.push({
        path: '/home/interfacePlatform/dockingLog',
        name: 'dockingLog',
        query: {
          appId: this.appidPage,
          type: this.typePage,
          methodName: row.cnName,
          id: this.id,
          page: 'detail',
        },
      })
      if (this.typePage == 'jscs') {
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJsCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    goBack() {
      if (this.typePage == 'jszs') {
        this.$router.push('/home/interfacePlatform/equipmentAppidJs')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      } else {
        this.$router.push('/home/interfacePlatform/equipmentAppidJsCs')
        this.$store.commit('CHANGE_SLIDER_NAME', {
          oldUrl: '/home/interfacePlatform/equipmentAppidJsCs',
          newUrl: this.$router.currentRoute.fullPath,
        })
      }
    },
  },
}
</script>
<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 194px;
}

.blockquote {
  color: #333;
  font: bold 16px Microsoft YaHei;
  border-bottom: 1px solid #dee5f4;
  height: 35px;
  margin: 0 24px;
}

.blockquote:before {
  background-color: #009588;
  content: '';
  padding: 2px;
  margin-right: 10px;
}

.labelWidth {
  width: 126px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  height: 36px;
  text-align: right;
}

.information {
  font-size: 14px;
  color: #151515;
  word-break: break-all;
}

.detailInfo {
  padding: 18px 0 5px 0;
}

.detailInfoItem {
  margin-top: 28px;
  padding: 0 24px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.tag-item {
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 0px;
  height: 20px;
  line-height: 18px;
  width: 60px;
  margin-left: 12px;
}
.titleTopBox {
  background: #fff;
  padding: 0px 24px;
}
.topContent {
  border-bottom: 1px solid #e3e7e9;
  height: 54px;
  line-height: 54px;
  .titleTop {
    font: bold 18px Microsoft YaHei;
    color: #333333;
  }
  .alignRight {
    text-align: right;
  }
  .createSalaryBut {
    padding: 10px 23px;
  }
  .salaryAccountBut {
    padding: 10px 23px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
